<template>
  <div class="news-container">
    <h1>育秀联合学校元旦假期安全教育告家长书</h1>
    <p class="date">2024年12月31日</p>
    <div class="content">
      <div class="image-container">
        <img src="@/../public/imgs/news/3.png" alt="育秀联合学校元旦假期安全教育" style="width: 100%; height: auto; object-fit: cover;">
      </div>
      <div class="text-container">
        <p>学校发布2025年元旦放假通知（1月1日放假1天），并附安全教育提示，包括交通出行（“一盔一带”）、居家防坠落、防火防传染病等。呼吁家长监督孩子规律作息，避免暴饮暴食，做好冬季传染病防护。</p>
        <h2>安全教育提示</h2>
        <ul>
          <li><strong>交通出行：</strong> 请教育孩子遵守交通规则，佩戴安全头盔，系好安全带。</li>
          <li><strong>居家安全：</strong> 防止孩子从高处坠落，确保家中电器和火源的安全。</li>
          <li><strong>防火安全：</strong> 注意用电安全，定期检查家中电线和插座，避免火灾发生。</li>
          <li><strong>传染病防护：</strong> 做好冬季传染病防护，勤洗手，保持室内通风，必要时佩戴口罩。</li>
        </ul>
        <p>学校呼吁家长在假期中监督孩子保持规律作息，避免暴饮暴食，确保孩子的健康和安全。</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 示例数据，实际项目中可以从API获取
const newsContent = ref({
  title: '育秀联合学校元旦假期安全教育告家长书',
  date: '2024年12月31日',
  paragraphs: [
    '学校发布2025年元旦放假通知（1月1日放假1天），并附安全教育提示，包括交通出行（“一盔一带”）、居家防坠落、防火防传染病等。呼吁家长监督孩子规律作息，避免暴饮暴食，做好冬季传染病防护。',
    '安全教育提示：',
    '<ul>',
    '<li><strong>交通出行：</strong> 请教育孩子遵守交通规则，佩戴安全头盔，系好安全带。</li>',
    '<li><strong>居家安全：</strong> 防止孩子从高处坠落，确保家中电器和火源的安全。</li>',
    '<li><strong>防火安全：</strong> 注意用电安全，定期检查家中电线和插座，避免火灾发生。</li>',
    '<li><strong>传染病防护：</strong> 做好冬季传染病防护，勤洗手，保持室内通风，必要时佩戴口罩。</li>',
    '</ul>',
    '学校呼吁家长在假期中监督孩子保持规律作息，避免暴饮暴食，确保孩子的健康和安全。'
  ],
  imageUrl: '@/../public/imgs/news/3.png'
})
</script>

<style scoped>
.news-container {
  width: 80%;
  margin: 20px auto;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
  color: #333;
}

h2 {
  color: #555;
  margin-top: 20px;
}

p {
  line-height: 1.6;
  color: #666;
}

.date {
  color: #999;
  font-size: 0.9em;
}

.content {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}

.image-container {
  flex: 1;
  max-width: 50%;
  padding-right: 20px;
  box-sizing: border-box;
}

.text-container {
  flex: 1;
  max-width: 50%;
  box-sizing: border-box;
}

ul {
  list-style-type: disc;
  padding-left: 20px;
}

li {
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .image-container, .text-container {
    max-width: 100%;
    padding: 0;
    margin-bottom: 20px;
  }
}
</style>
